<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 800px;
            margin: 0 auto;
        }
        table{
            width: 800px;
            border: 1px solid #ccc;
            border-collapse: collapse;
            margin-top: 10px;
            text-align: center;
        }
        .box table tr th,.box table tr td{
            border: 1px solid #ccc;
            height: 30px;
        }
    </style>
</head>
<body>
    
    <div class="box">
        <button id="addBtn">新增一行</button>
        <table>
            <thead>
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="tbody">
                <tr>
                    <td>001</td>
                    <td>张三</td>
                    <td>男</td>
                    <td>12</td>
                    <td><button onclick="up(this)">向上</button><button onclick="down(this)">向下</button><button onclick="del(this)">删除</button></td>
                </tr>
                <tr>
                    <td>002</td>
                    <td>李四</td>
                    <td>女</td>
                    <td>12</td>
                    <td><button onclick="up(this)">向上</button><button onclick="down(this)">向下</button><button onclick="del(this)">删除</button></td>
                </tr>
                <tr>
                    <td>003</td>
                    <td>王五</td>
                    <td>男</td>
                    <td>13</td>
                    <td><button onclick="up(this)">向上</button><button onclick="down(this)">向下</button><button onclick="del(this)">删除</button></td>
                </tr>
                <tr>
                    <td>004</td>
                    <td>谢六</td>
                    <td>女</td>
                    <td>12</td>
                    <td><button onclick="up(this)">向上</button><button onclick="down(this)">向下</button><button onclick="del(this)">删除</button></td>
                </tr>
                <tr>
                    <td>005</td>
                    <td>旬七</td>
                    <td>男</td>
                    <td>11</td>
                    <td><button onclick="up(this)">向上</button><button onclick="down(this)">向下</button><button onclick="del(this)">删除</button></td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>
        let del = (btn) => {
            btn.parentNode.parentNode.remove();
        }

        let up = (btn) => {
            let li = btn.parentNode.parentNode;
            let prevLi = li.previousElementSibling;

            if(prevLi == null) {
                alert('已经是第一行了！');
                return;
            }

            prevLi.parentNode.insertBefore(li,prevLi);
        }

        let down = (btn) => {
            let li = btn.parentNode.parentNode;
            let nextLi = li.nextElementSibling;
            
            if(nextLi == null) {
                alert('已经是最后一行了！');
                return;
            }

            nextLi.parentNode.insertBefore(li,nextLi.nextElementSibling);
        }

        let add = () => {
            let tr = document.createElement('tr');
            tr.innerHTML = `<td>005</td>
                    <td>旬七</td>
                    <td>男</td>
                    <td>11</td>
                    <td><button  onclick="top(this)">向上</button><button onclick="bottom(this)">向下</button><button onclick="del(this)">删除</button></td>`;

            tbody.appendChild(tr);
        }

        addBtn.onclick = () => {
            add();
        }

    </script>
</body>
</html>